<template>
  <div class="index">
     <div class="mask" @click="cancel" v-show="isshow"></div>
    <div class="head">
      <div class="h-head">
        <div class="left">
          <img src="../../assets/left.png" alt />
          <p style="font-size:.48rem">LK</p>
        </div>
        <!-- <span class="bts1">矿机托管</span> -->
        <div class="right">
          <img src="@/assets/ddd.png" class="dian" @click="showLj" alt />
          <transition name="fade">
            <div class="s_list" v-show="isshow">
              <div class="s_block">
                <img class="xt" src="@/assets/zz.png" alt />
                <router-link to="/transfer">转账</router-link>
              </div>
              <div style="width:80px;background:#fff;height:1px"></div>
              <div class="s_block" @click="logout">
                <img class="xt" src="@/assets/logout.png" alt />
                <span>退出</span>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="sl_list">
      <div class="sl_block">
        <div class="sl1">
          <div class="left">
            <span style="font-weight:bold!important;">蚂蚁矿机S17 Pro 53T</span>
          </div>
          <div class="right">
            <span class="ll1" style="font-weight:bold!important;">22.22</span>
            <span class="ll2;">USDT</span>
          </div>
        </div>
        <div class="sl3">
          <span style="width:25%;text-align: left">
            <span>50</span>
            <span style="font-size:.266667rem">TH/s</span>
          </span>
          <span style="width:25%">
            <span>33.4444</span>
            <span style="font-size:.266667rem">KW/h</span>
          </span>
          <div class="xmm" style="width:25%;display:flex;justify-content: center;">
            <span>
              <span>33</span>
              <span style="font-size:.266667rem">%</span>
            </span>
          </div>
          <span class="tt" style="width:25%;text-align: right">
            <span>434</span>
            <span style="font-size:.266667rem">USDT/天</span>
          </span>
        </div>
        <div class="sl4">
          <span style="width:25%;text-align: left">算力</span>
          <span style="width:25%">功耗</span>
          <span style="width:25%">托管费</span>
          <span style="width:25%;text-align: right" class="tt">电费</span>
        </div>
        <div class="sl5">
          <div class="left">
            <span></span>
          </div>
          <div class="right">已售：30.62%</div>
        </div>
      </div>
      <div class="sl_block">
        <div class="sl1">
          <div class="left">
            <span style="font-weight:bold!important;">蚂蚁矿机S17 Pro 53T</span>
          </div>
          <div class="right">
            <span class="ll1" style="font-weight:bold!important;">22.22</span>
            <span class="ll2;">USDT</span>
          </div>
        </div>
        <div class="sl3">
          <span style="width:25%;text-align: left">
            <span>50</span>
            <span style="font-size:.266667rem">TH/s</span>
          </span>
          <span style="width:25%">
            <span>33.4444</span>
            <span style="font-size:.266667rem">KW/h</span>
          </span>
          <div class="xmm" style="width:25%;display:flex;justify-content: center;">
            <span>
              <span>33</span>
              <span style="font-size:.266667rem">%</span>
            </span>
          </div>
          <span class="tt" style="width:25%;text-align: right">
            <span>434天</span>
            <span style="font-size:.266667rem">USDT/天</span>
          </span>
        </div>
        <div class="sl4">
          <span style="width:25%;text-align: left">算力</span>
          <span style="width:25%">功耗</span>
          <span style="width:25%">托管费</span>
          <span style="width:25%;text-align: right" class="tt">电费</span>
        </div>
        <div class="sl5">
          <div class="left">
            <span></span>
          </div>
          <div class="right">已售：30.62%</div>
        </div>
      </div>
      <div class="sl_block">
        <div class="sl1">
          <div class="left">
            <span style="font-weight:bold!important;">蚂蚁矿机S17 Pro 53T</span>
          </div>
          <div class="right">
            <span class="ll1" style="font-weight:bold!important;">22.22</span>
            <span class="ll2;">USDT</span>
          </div>
        </div>
        <div class="sl3">
          <span style="width:25%;text-align: left">
            <span>50</span>
            <span style="font-size:.266667rem">TH/s</span>
          </span>
          <span style="width:25%">
            <span>33.4444</span>
            <span style="font-size:.266667rem">KW/h</span>
          </span>
          <div class="xmm" style="width:25%;display:flex;justify-content: center;">
            <span>
              <span>33</span>
              <span style="font-size:.266667rem">%</span>
            </span>
          </div>
          <span class="tt" style="width:25%;text-align: right">
            <span>434天</span>
            <span style="font-size:.266667rem">USDT/天</span>
          </span>
        </div>
        <div class="sl4">
          <span style="width:25%;text-align: left">算力</span>
          <span style="width:25%">功耗</span>
          <span style="width:25%">托管费</span>
          <span style="width:25%;text-align: right" class="tt">电费</span>
        </div>
        <div class="sl5">
          <div class="left">
            <span></span>
          </div>
          <div class="right">已售：30.62%</div>
        </div>
      </div>
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/Tabbar.vue";

export default {
  name: "index",
  components: {
    Tabbar
  },
  data() {
    return {
      isshow: false,
      items: [],
      itemss: [],
      artical: []
    };
  },

  created: function() {},
  mounted() {
    var sl_block = document.querySelector(".sl_block");
    sl_block.style.marginTop = "-1rem";
  },
  methods: {
    showLj() {
      this.isshow = !this.isshow;
    },
    cancel() {
      this.isshow = false;
    },
    logout() {
      this.$router.push('/')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.xmm {
  .f-flex();
}
.xm {
  margin-left: 0.1rem;
  img {
    font-size: 0.293333rem;
    width: 0.8rem;
    height: 0.4rem;
  }
}
.mask {
  background-color: transparent;
  opacity: 0.4;
  position: fixed;
  width: 100%;
  height: 100%;
}
.index {
  .head {
    color: #fefeff;
    height: 3.466667rem;
    width: 100%;
    background: url(../../assets/kj_bg.png) no-repeat;
    background-size: cover;
  }
  .dian {
    width: 0.586667rem;
    height: 0.213333rem;
  }
  .s_list {
    position: absolute;
    left: 0.2rem;
    width: 2.9rem;
    z-index: 4;
    border-radius: 0.166667rem;
    background: #000;
    color: #fff;
    font-size: 0.4rem;
    transform: translateX(-80%);
    .f-flex();
    flex-direction: column;
    top: 0.84rem;
    .s_block {
      padding-top: 0.32rem;
      padding-bottom: 0.32rem;
      .f-flex();
    }
  }
  .s_list:after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 8px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    margin-bottom: -8px;
    border-bottom-width: 15px;
    border-bottom-color: currentColor;
    color: #000;
  }
  .xt {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.2rem;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.8s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .h-head {
    padding: 0.62rem 0.346667rem 0.4rem;
    color: #fefeff;
    .f-flex();
    justify-content: space-between;
    .bts1 {
      font-size: .4rem;
    }
    .left {
      .f-flex();
      font-size: 0.64rem;
      img {
        width: 0.293333rem;
        height: 0.48rem;
        margin-right: 0.266667rem;
      }
    }
    .right {
      font-size: 0.48rem;
      position: relative;
    }
  }
  .my_income {
    a {
      color: #fff;
    }
    .f-flex();
    justify-content: center;
    width: 1.706667rem;
    height: 3.413333rem;
    background: url(../../assets/b_red.png) no-repeat;
    background-size: cover;
    img {
      width: 0.186667rem;
      height: 0.293333rem;
    }
  }
  .h_bottom {
    .f-flex();
    .b_list {
      .f-flex();
      .xiaoyuan {
        width: 0.32rem;
        height: 0.32rem;
        background: #fff;
        border-radius: 0.32rem;
        margin-left: 0.746667rem;
        margin-right: 0.266667rem;
      }
    }
  }
  .sl_list {
    .sl_block {
      width: 92%;
      border-radius: 0.266667rem;
      background-color: #fff;
      margin-left: 4%;
      margin-bottom: 0.266667rem;
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
      position: relative;
      z-index: 2;
      .sl1 {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        .f-flex();
        justify-content: space-between;
        padding-bottom: 0.533333rem;
        .left {
          .f-flex();
          span {
            font-size: 0.48rem;
            color: #434343;
            margin-right: 0.4rem;
          }
        }
        .right {
          color: #434343;
          .ll1 {
            font-size: 0.48rem;
            margin-right: 0.106667rem;
          }
          .ll2 {
            font-size: 0.32rem;
          }
        }
      }
      .sl3 {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        .f-flex();
        justify-content: space-between;
        color: #313131;
        margin-bottom: 0.213333rem;
        // font-size: 0.4rem;
      }
      .sl4 {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        .f-flex();
        justify-content: space-between;
        color: #8a8a8a;
        margin-bottom: 0.533333rem;
        // font-size: 0.4rem;
      }
      .sl5 {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        margin-top: 0.266667rem;
        margin-bottom: 0.12rem;
        .f-flex();
        justify-content: space-between;
        .left {
          width: 5.946667rem;
          border-radius: 1rem;
          overflow: hidden;
          height: 0.106667rem;
          background: #f2f2f2;
          position: relative;
          span {
            position: absolute;
            top: 0;
            left: 0;
            height: 0.106667rem;
            width: 33%;
            background: #6680dd;
            border-radius: 1rem;
          }
        }
      }
      .sl6 {
        text-align: left;
        margin-left: 0.533333rem;
        color: #434343;
      }
    }
  }
}
</style>

